
<template>
  <v-card>
    <v-card-text>
      <div class="layout row ma-0 align-center justify-space-between">
        <div class="text-box">
          <div class="subheading pb-2">{{ title }}</div>
          <span class="grey--text">{{ subTitle }} <v-icon :color="iconColor" small>{{ icon }}</v-icon></span>
        </div>
        <div class="chart">
          <e-chart
            :path-option="computeChartOption"
            height="68px"
            width="100%"
          />
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
import EChart from '@/components/chart/echart'
export default {
  components: {
    EChart
  },
  props: {
    title: String,
    subTitle: String,
    icon: String,
    iconColor: {
      type: String,
      default: 'success'
    },
    type: String,
    chartColor: String,
    data: Array
  },
  data() {
    return {
      defaultOption: [
        ['dataset.source', this.data],
        ['xAxis.show', false],
        ['yAxis.show', false],
        ['color', [this.chartColor]]
      ]
    }
  },

  computed: {
    computeChartOption() {
      switch (this.type) {
        case 'bar':
          this.defaultOption.push(['series[0].type', 'bar'])
          break
        case 'area':
          this.defaultOption.push(['series[0].type', 'line'])
          this.defaultOption.push(['series[0].areaStyle', {}])
          break
        default:
          break
      }
      return this.defaultOption
    }
  }

}
</script>

<style>

</style>
